<template>
  <div id="app">
    <main-nav :shopping="shopping"></main-nav>
    <router-view :shopping="shopping"></router-view>
    <main-footer></main-footer>
  </div>
</template>

<script>
import MNav from './components/MainNav';
import MFooter from './components/MainFooter';
export default {
  name: 'App',
  data () {
    return {
      shopping: []
    }
  },
  components: {
    'main-nav': MNav,
    'main-footer': MFooter
  }
}
</script>

<style>
a {
  outline: none;
}
#app {
  background: #e7e7e7;
}
.badge-redpink{
  background: #eb746b;
  background-image: linear-gradient(#eb746b,#e25147);
  box-shadow: inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 2px hsla(0,0%,100%,.15);
}
</style>
